<template>
  <div class="flow-container">
    <div class="follow-center-container">
      <!-- 侧边栏 -->
      <aside class="follow-sidebar">
        <div class="sidebar-header">
          <div class="header-icon">
            <svg viewBox="0 0 24 24" class="icon">
              <path d="M16,4C18.22,4 20,5.78 20,8C20,10.22 18.22,12 16,12C13.78,12 12,10.22 12,8C12,5.78 13.78,4 16,4M16,14C20.42,14 24,15.79 24,18V20H8V18C8,15.79 11.58,14 16,14Z"/>
            </svg>
          </div>
          <h3 class="sidebar-title">我的关注</h3>
          <div class="user-count-badge">
            <span>{{ users.length }}</span> 位用户
          </div>
        </div>
        <div class="user-list-container" v-loading="loading">
          <ul class="user-list">
            <li
              v-for="user in users"
              :key="user.id"
              :class="['user-item', { active: selectedUser?.id === user.id }]"
              @click="selectUser(user)"
            >
              <div class="user-avatar-wrapper">
                <div class="user-avatar">
                  <img v-if="user.avatar" :src="user.avatar" :alt="user.username" />
                  <div v-else class="default-avatar">
                    <svg viewBox="0 0 24 24" class="avatar-icon">
                      <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="user-info">
                <div class="username">{{ user.username }}</div>
                <div class="user-meta">
                  <span class="user-intro">{{ user.personalIntroduce || '暂无简介' }}</span>
                </div>
              </div>
              <div class="user-status">
                <div class="status-indicator"></div>
              </div>
            </li>
            <li v-if="users.length === 0 && !loading" class="no-users">
              <div class="empty-state">
                <svg viewBox="0 0 24 24" class="empty-icon">
                  <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"/>
                </svg>
                <p>暂无关注用户</p>
                <small>去发现更多有趣的内容吧~</small>
              </div>
            </li>
          </ul>
        </div>
      </aside>
      
      <!-- 主内容区 -->
      <main class="main-content" ref="mainContentRef">
        <div class="content-wrapper">
          <div v-if="selectedUser" class="user-posts">
            <!-- 用户信息头部 -->
            <div class="user-header">
              <div class="user-profile">
                <div class="profile-avatar">
                  <img v-if="selectedUser.avatar" :src="selectedUser.avatar" :alt="selectedUser.username" />
                  <div v-else class="default-profile-avatar">
                    <svg viewBox="0 0 24 24" class="profile-avatar-icon">
                      <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/>
                    </svg>
                  </div>
                </div>
                <div class="profile-info">
                  <h2 class="profile-name">{{ selectedUser.username }}</h2>
                  <p class="profile-bio">{{ selectedUser.personalIntroduce || "这个用户很神秘，什么都没有留下~" }}</p>
                  <div class="profile-stats">
                    <div class="stat-item">
                      <span class="stat-number">{{ selectedUser.postCount || 0 }}</span>
                      <span class="stat-label">帖子</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 帖子列表 -->
            <div class="posts-section">
              <div class="section-header">
                <h3>全部帖子</h3>
                <div class="post-stats">
                  共 {{ selectedUser.postCount || 0 }} 篇帖子
                </div>
              </div>
              
              <div class="posts-list" v-loading="loadingPosts">
                <div
                  v-for="post in selectedUser.posts"
                  :key="post.id"
                  class="post-item"
                  @click="goToPost(post.id)"
                >
                  <div class="post-header">
                    <h4 class="post-title">{{ post.title }}</h4>
                    <div class="post-category" v-if="post.categoryName">
                      {{ post.categoryName }}
                    </div>
                  </div>
                  <div class="post-content">
                    {{ getContentPreview(post.content, 120) }}
                  </div>
                  <div class="post-footer">
                    <div class="post-meta">
                      <span class="post-time">
                        <svg viewBox="0 0 24 24" class="meta-icon">
                          <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"/>
                        </svg>
                        {{ formatTime(post.createTime) }}
                      </span>
                      <span class="post-author" v-if="post.authorNickname">
                        <svg viewBox="0 0 24 24" class="meta-icon">
                          <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/>
                        </svg>
                        {{ post.authorNickname }}
                      </span>
                    </div>
                    <div class="post-actions">
                      <span class="action-item">
                        <svg viewBox="0 0 24 24" class="action-icon">
                          <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5 2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"/>
                        </svg>
                        {{ post.likeCount || 0 }}
                      </span>
                      <span class="action-item">
                        <svg viewBox="0 0 24 24" class="action-icon">
                          <path d="M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9Z"/>
                        </svg>
                        {{ post.commentCount || 0 }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 加载更多 -->
              <div v-if="pagination.hasMore && selectedUser.posts && selectedUser.posts.length > 0" 
                   class="load-more-container">
                <button 
                  class="load-more-btn" 
                  @click="loadMorePosts"
                  :disabled="loadingPosts"
                >
                  <span v-if="!loadingPosts">加载更多</span>
                  <span v-else>加载中...</span>
                </button>
              </div>

              <!-- 空状态 -->
              <div v-if="selectedUser.postCount === 0 && !loadingPosts" class="no-posts">
                <div class="empty-posts">
                  <svg viewBox="0 0 24 24" class="empty-icon">
                    <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19Z"/>
                  </svg>
                  <h4>暂无帖子</h4>
                  <p>该用户还没有发布任何帖子</p>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 未选择用户提示 -->
          <div v-else class="select-user-prompt">
            <div class="prompt-content">
              <div class="prompt-illustration">
                <div class="illustration-circle">
                  <svg viewBox="0 0 24 24" class="illustration-icon">
                    <path d="M16,4C18.22,4 20,5.78 20,8C20,10.22 18.22,12 16,12C13.78,12 12,10.22 12,8C12,5.78 13.78,4 16,4M16,14C20.42,14 24,15.79 24,18V20H8V18C8,15.79 11.58,14 16,14Z"/>
                  </svg>
                </div>
              </div>
              <h3>选择关注用户</h3>
              <p>从左侧列表中选择一位用户，查看他们的精彩内容</p>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { getFollowUser } from "../../api/follow";
import { useUserStore } from "../../stores/user";
import { ElMessage, ElLoading } from "element-plus";
import { getPostsByAuthorId } from "../../api/post";
import { getUserByIdApi } from "../../api/user";
// 定义类型接口
interface Post {
  id: number;
  authorId: number;
  title: string;
  content: string;
  status: number;
  commentCount: number;
  likeCount: number;
  createTime: string;
  updateTime: string;
  categoryId: number;
  categoryName: string;
  authorNickname: string;
  authorAvatar: string;
}

interface FollowedUser {
  id: number;
  username: string;
  avatar?: string;
  personalIntroduce?: string;
  email?: string;
  postCount?: number;
  following?: number;
  followers?: number;
  posts?: Post[];
}

const router = useRouter();
const userStore = useUserStore();
const mainContentRef = ref<HTMLElement | null>(null);

// 响应式数据
const users = ref<FollowedUser[]>([]);
const selectedUser = ref<FollowedUser | null>(null);
const loading = ref(false);
const loadingPosts = ref(false);
const pagination = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  hasMore: true
});

// 获取关注用户列表
async function fetchFollowedUsers() {
  try {
    loading.value = true;
    const res = await getFollowUser(Number(userStore.id));
    console.log("获取关注列表:", res);

    if (res && Array.isArray(res)) {
      // 处理关注用户列表，获取详细信息
      const userPromises = res.map(async (user: any) => {
        try {
          const userDetailRes = await getUserByIdApi(user.id);
          const userDetail = userDetailRes.data || {};
          
          return {
            id: user.id,
            username: userDetail.nickname || user.username || `用户${user.id}`,
            avatar: userDetail.avatar || '',
            personalIntroduce: userDetail.personalIntroduce || "暂无个人简介",
            email: userDetail.email || '',
            postCount: 0,
            following: 0,
            followers: 0,
            posts: []
          };
        } catch (error) {
          console.error(`获取用户${user.id}详情失败:`, error);
          return {
            id: user.id,
            username: user.username || `用户${user.id}`,
            avatar: '',
            personalIntroduce: "暂无个人简介",
            email: '',
            postCount: 0,
            following: 0,
            followers: 0,
            posts: []
          };
        }
      });

      users.value = await Promise.all(userPromises);
    } else {
      users.value = [];
    }
  } catch (error) {
    console.error("获取关注列表失败:", error);
    ElMessage.error("获取关注列表失败");
    users.value = [];
  } finally {
    loading.value = false;
  }
}

// 获取用户帖子
async function fetchUserPosts(userId: number, reset = false) {
  try {
    loadingPosts.value = true;
    
    if (reset) {
      pagination.pageNum = 1;
      pagination.hasMore = true;
    }

    const res = await getPostsByAuthorId(userId, pagination.pageNum, pagination.pageSize);
    console.log("获取用户帖子:", res);

    // 使用API函数处理后的数据
    const postList = res.list || [];
    const total = res.total || 0;
    const totalPages = res.totalPages || 1;
    
    pagination.total = total;
    
    if (selectedUser.value) {
      if (reset) {
        selectedUser.value.posts = postList;
      } else {
        selectedUser.value.posts = [...(selectedUser.value.posts || []), ...postList];
      }
      
      selectedUser.value.postCount = total;
      // 检查是否还有更多页面
      pagination.hasMore = pagination.pageNum < totalPages;
    }

  } catch (error) {
    console.error("获取用户帖子失败:", error);
    ElMessage.error("获取用户帖子失败");
  } finally {
    loadingPosts.value = false;
  }
}

// 选择用户
async function selectUser(user: FollowedUser) {
  selectedUser.value = user;
  
  // 重置分页并获取帖子
  await fetchUserPosts(user.id, true);
  
  nextTick(() => {
    if (mainContentRef.value) {
      mainContentRef.value.scrollTo({ top: 0, behavior: "smooth" });
    }
  });
}

// 加载更多帖子
async function loadMorePosts() {
  if (!selectedUser.value || loadingPosts.value || !pagination.hasMore) return;
  
  pagination.pageNum++;
  await fetchUserPosts(selectedUser.value.id, false);
}

// 格式化时间
function formatTime(timeString: string): string {
  if (!timeString) return '';
  
  try {
    const date = new Date(timeString);
    if (isNaN(date.getTime())) return timeString;
    
    return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`;
  } catch (error) {
    return timeString;
  }
}

function padZero(num: number): string {
  return num < 10 ? `0${num}` : num.toString();
}

// 截取内容预览
function getContentPreview(content: string, maxLength = 100): string {
  if (!content) return '';
  
  // 移除 Markdown 格式字符
  let cleanContent = content
    .replace(/#{1,6}\s+/g, '') // 移除标题符号
    .replace(/\*\*(.*?)\*\*/g, '$1')
    .replace(/\*(.*?)\*/g, '$1') // 秮除斜体标记
    .replace(/`(.*?)`/g, '$1') // 秽除代码标记
    .replace(/\[(.*?)\]\(.*?\)/g, '$1') // 移除链接格式，保留文本
    .replace(/\n+/g, ' ') // 将换行符替换为空格
    .trim();
  
  return cleanContent.length > maxLength ? cleanContent.substring(0, maxLength) + '...' : cleanContent;
}

// 跳转到帖子详情
function goToPost(postId: number) {
  router.push(`/forum/${postId}`);
}

onMounted(() => {
  fetchFollowedUsers();
});
</script>

<style scoped>

.follow-center-container {
  display: flex;
  width: 96%;
  margin: 0 auto;
  height: 98%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

/* 侧边栏样式 */
.follow-sidebar {
  width: 320px;
  height: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e2e8f0;
}

.sidebar-header {
  padding: 36px 25px 24px;
  border-bottom: none;
  text-align: center;
  background: linear-gradient(135deg, #f0f4ff 0%, #e9e3ff 100%);
  border-radius: 0 0 32px 32px;
  box-shadow: 0 4px 24px rgba(102, 126, 234, 0.08);
  position: relative;
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.18);
  border: 3px solid #fff;
}

.header-icon .icon {
  width: 32px;
  height: 32px;
  fill: white;
  display: block;
  margin: auto;
}

.sidebar-title {
  color: #222e50;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px 0;
  letter-spacing: 1px;
}

.user-count-badge {
  display: inline-block;
  background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  padding: 3px 16px;
  margin-top: 4px;
  box-shadow: 0 2px 8px rgba(161, 140, 209, 0.12);
}

.sidebar-header::after {
  content: '';
  display: block;
  height: 4px;
  width: 80%;
  margin: 18px auto 0 auto;
  border-radius: 2px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  opacity: 0.18;
}

.user-list-container {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: none;
}

.user-list {
  list-style: none;
  padding: 10px 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #a18cd1 #f1f5f9;
}

.user-list::-webkit-scrollbar {
  width: 6px;
}
.user-list::-webkit-scrollbar-thumb {
  background: #a18cd1;
  border-radius: 3px;
}
.user-list::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 6px 18px;
  border-radius: 16px;
  position: relative;
  background: #f7f8fa;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(161, 140, 209, 0.04);
  border: 1.5px solid transparent;
}

.user-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px 0 0 16px;
  transition: width 0.3s ease;
  z-index: 0;
}

.user-item:hover::before,
.user-item.active::before {
  width: 6px;
}

.user-item:hover {
  background: linear-gradient(90deg, #f3e7fa 0%, #e3eeff 100%);
  transform: translateX(6px) scale(1.03);
  border-color: #a18cd1;
}

.user-item.active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.13) 0%, rgba(118, 75, 162, 0.13) 100%);
  border: 1.5px solid #a18cd1;
}

.user-avatar-wrapper {
  margin-right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(161, 140, 209, 0.13);
  border: 2.5px solid #fff;
  background: #e9e3ff;
  transition: transform 0.2s;
}

.user-item:hover .user-avatar {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(161, 140, 209, 0.18);
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.default-avatar {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-icon {
  width: 26px;
  height: 26px;
  fill: #a18cd1;
}

.user-info {
  flex: 1;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.username {
  font-size: 16px;
  font-weight: 700;
  color: #222e50;
  margin-bottom: 2px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-intro {
  font-size: 12px;
  color: #a18cd1;
  font-weight: 500;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-status {
  position: relative;
  z-index: 1;
  margin-left: 8px;
}

.status-indicator {
  width: 9px;
  height: 9px;
  background: #10b981;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 4px #10b98144;
}

.no-users {
  padding: 40px 20px;
  text-align: center;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.empty-icon {
  width: 48px;
  height: 48px;
  fill: #cbd5e1;
}

.empty-state p {
  color: #64748b;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.empty-state small {
  color: #94a3b8;
  font-size: 13px;
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  background: #fafbfc;
}

.content-wrapper {
  padding: 30px;
  max-width: 800px;
  margin: 0 auto;
}

/* 用户信息头部 */
.user-header {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
}

.user-profile {
  display: flex;
  align-items: flex-start;
  gap: 25px;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.default-profile-avatar {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar-icon {
  width: 40px;
  height: 40px;
  fill: white;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 10px 0;
}

.profile-bio {
  font-size: 15px;
  color: #64748b;
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.profile-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-number {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

/* 帖子部分 */
.posts-section {
  background: #ffffff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f1f5f9;
}

.section-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.post-stats {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post-item {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #f1f5f9;
  position: relative;
  overflow: hidden;
}

.post-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.post-item:hover::before {
  opacity: 1;
}

.post-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: rgba(102, 126, 234, 0.2);
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  position: relative;
  z-index: 1;
}

.post-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
  flex: 1;
  margin-right: 15px;
}

.post-category {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.post-content {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 15px;
}

.post-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.meta-icon {
  width: 14px;
  height: 14px;
  fill: #94a3b8;
}

.post-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.action-icon {
  width: 16px;
  height: 16px;
  fill: #94a3b8;
}

/* 加载更多 */
.load-more-container {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
}

.load-more-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.load-more-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* 空状态 */
.no-posts {
  text-align: center;
  padding: 60px 30px;
}

.empty-posts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.empty-posts .empty-icon {
  width: 64px;
  height: 64px;
  fill: #cbd5e1;
}

.empty-posts h4 {
  font-size: 18px;
  font-weight: 600;
  color: #64748b;
  margin: 0;
}

.empty-posts p {
  font-size: 14px;
  color: #94a3b8;
  margin: 0;
}

/* 选择用户提示 */
.select-user-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 500px;
}

.prompt-content {
  text-align: center;
  max-width: 400px;
  padding: 40px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid #f1f5f9;
}

.prompt-illustration {
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.illustration-circle {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.illustration-icon {
  width: 48px;
  height: 48px;
  fill: #667eea;
  display: block;
  margin: auto;
}

.prompt-content h3 {
  font-size: 20px;
  color: #1e293b;
  margin-bottom: 12px;
  font-weight: 600;
}

.prompt-content p {
  font-size: 15px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .follow-sidebar {
    width: 240px;
  }
  .sidebar-header {
    padding: 28px 10px 18px;
    border-radius: 0 0 24px 24px;
  }
}
@media (max-width: 768px) {
  .follow-sidebar {
    width: 100%;
    max-height: 220px;
    border-radius: 0 0 18px 18px;
  }
  .sidebar-header {
    padding: 18px 6px 10px;
    border-radius: 0 0 14px 14px;
  }
  .user-avatar {
    width: 38px;
    height: 38px;
  }
  .username {
    font-size: 14px;
  }
  .user-intro {
    font-size: 11px;
    max-width: 80px;
  }
}

/* 滚动条样式 */
.user-list::-webkit-scrollbar,
.main-content::-webkit-scrollbar {
  width: 6px;
}

.user-list::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.user-list::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.user-list::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
</style>
